import React, { Component } from "react";
import Dialog from "./Dialog";

export default class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
        visible:false,
        name:"",
    };
  }

  confirm1 = ()=>{
   // alert("根据"+this.state.name+"去删除");
    this.cancel1();
    this.props.delUserByName(this.state.name);

  }
  cancel1  = ()=>{
    this.setState({
        visible:false
    })
  }

  render() {
    return (
      <div>
        <Dialog
          confirm={this.confirm1}
          cancel={this.cancel1}
          tip="删除的提示"
          visible={this.state.visible}
          content="你确定要删除我吗"
        ></Dialog>
        <div className="tr">
          <div className="td">姓名</div>
          <div className="td">年龄</div>
          <div className="td">操作</div>
        </div>
        {this.props.list.map((item, index) => {
          return (
            <div className="tr" key={index}>
              <div className="td">{item.name}</div>
              <div className="td">{item.age}</div>
              <div className="td" onClick={()=>{
                //先提示 然后调用父组件的数据
                    this.setState({ //弹框
                        visible:true,
                        name:item.name
                    })

              }}>删除</div>
            </div>
          );
        })}
      </div>
    );
  }
}
